<template>
  <div class="head-box">
    <div class="head-wrap">
      <div class="head-logo">
        <a href="/">
          <img
              style=""
              src="@/assets/images/logo.svg"
              alt="Element logo"
            /> <div style="display: inline-block;">{{app_name}}</div></a>
        
      </div>
      
      <div class="head-menu">        
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
        
          <div class="flex-grow" ></div>
          <el-menu-item index="0">
            <a href="/">首页</a>
          </el-menu-item>
          <el-menu-item index="0">
            <a href="/about">关于</a>
          </el-menu-item>
          
          <el-menu-item index="0">
            <a href="">搜索</a>
          </el-menu-item>
          <el-menu-item index="1"><a>搜索</a></el-menu-item>
            <el-sub-menu index="2">
              <template #title>Workspace</template>
              <el-menu-item index="2-1">item one</el-menu-item>
              <el-menu-item index="2-2">item two</el-menu-item>
              <el-menu-item index="2-3">item three</el-menu-item>
              <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="3" disabled>Info</el-menu-item>
            <el-menu-item index="4">Orders</el-menu-item>
        </el-menu>
      </div>
        
    </div>
   
  
  </div>

  <div class="sub-nav">
    <a href="javascript:void(0)" @click="drawer = true"><el-icon :size="20" ><Expand /></el-icon>MENU</a>
    <!-- <a class="el-backtop" >BACK TO TOP</a> -->
    <el-backtop :bottom="0" :right="0">
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        text-align: center;
        line-height: 40px;
        color: #555;
      "
    >
    BACK TO TOP
    </div>
  </el-backtop>
  </div>
  
  <div class="container">
    <div class="left">
     
      <h5 class="mb-2">Default colors</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
                <el-sub-menu index="1-4">
                  <template #title>item four</template>
                  <el-menu-item index="1-4-1">item five</el-menu-item>
                </el-sub-menu>
              </el-menu-item-group>
              
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <span>Navigator Four</span>
            </el-menu-item>
          </el-menu>

       
        

        <hr>
        <h5 class="mb-2">TEST menu</h5>
        <!--
        可以定制的
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        -->
        <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"        
        unique-opened
        @open="handleOpen"
        @close="handleClose"
      >
        <CMenu v-for="i in menuData" :key="i.cat_id" :menus="i" />
      </el-menu>
    </div>
    <div class="right">
      <div class="admin">
        <h1>This is an admin page</h1>
        <div>
          查看Element-plus组件库中的el-menu组件,不难发现,菜单栏大致可以分为两类,一类是有子菜单的,一类是无子菜单的。 所以我们将对这两类进行分情况设计,再结合递归,即可完成根据路由...

          查看Element-plus组件库中的el-menu组件,不难发现,菜单栏大致可以分为两类,一类是有子菜单的,一类是无子菜单的。 所以我们将对这两类进行分情况设计,再结合递归,即可完成根据路由...
          查看Element-plus组件库中的el-menu组件,不难发现,菜单栏大致可以分为两类,一类是有子菜单的,一类是无子菜单的。 所以我们将对这两类进行分情况设计,再结合递归,即可完成根据路由...
          查看Element-plus组件库中的el-menu组件,不难发现,菜单栏大致可以分为两类,一类是有子菜单的,一类是无子菜单的。 所以我们将对这两类进行分情况设计,再结合递归,即可完成根据路由...
        </div>
      </div>

    </div>

    <el-drawer
      v-model="drawer"
      title="I am the title"
      :direction="direction"
      :with-header="false"
      size="70%"
    > 
    <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        
        unique-opened
        @open="handleOpen"
        @close="handleClose"
      >
        <CMenu v-for="i in menuData" :key="i.cat_id" :menus="i" />
      </el-menu>
    </el-drawer>
    
  </div>  
  

  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { inject } from 'vue';
import CONST from '@/config/constant'
import CATE from '@/config/category'
 
import CMenu from '@/components/frame/CMenu.vue'

// 全局引入，这里可以不要了
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Expand
} from '@element-plus/icons-vue'

console.log(CONST)
const app_name = CONST.app_name


// const globalEnum:any = inject("globalConstEnum");
// const globalAllList:any = Object.values(globalEnum.COMMUNICATION)
// console.log(globalAllList); // [{"value":"1", "label": "测试1"} ... {"value":"5", "label": "测试5"}]

const drawer = ref(false)
const direction = ref('ltr')

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// menuData
const menuData = CATE.menuData
/*
const menuData  = [
  {
    'cat_id':'1',
    'title':'Navigator One',
    'href':'',
    'icon':'location',
   
    'children':[
      {
        'cat_id':'2',
        'title':'Group One',
        'href':'',
        'icon':'',
        'children':[
          {
            'cat_id':'3',
            'title':'item one',
            'href':'',
            'icon':'',
            'children':''
          },
          {
            'cat_id':'4',
            'title':'item two',
            'href':'',
            'icon':'',
            'children':''
          }
        ]
      },
      {
        'cat_id':'5',
        'title':'Group Two',
        'href':'',
        'icon':'',
        'children':[
          {
            'cat_id':'6',
            'title':'item three',
            'href':'',
            'children':''
          }
        ]
      },
    ]
  },
 
  {
    'cat_id':'7',
    'title':'Navigator Two',
    'href':'',
    'icon':'menu',
    'children':[
    ]
  },
  {
    'cat_id':'8',
    'title':'Navigator Three',
    'href':'',
    'icon':'document',
    'children':[
    ]
  },
  {
    'cat_id':'9',
    'title':'Navigator Four',
    'href':'',
    'icon':'setting',
    'children':[
    ]
  },
]
*/
console.log(menuData)

const isCollapse = ref(false)
</script>

<style>
.flex-grow {
  flex-grow: 1;
}

.head-box{
  width: 100%;
    /* height: 20vh; */
    position: sticky;
    border-bottom: solid 1px var(--el-border-color);
}

.head-wrap{
  padding: 0 10px;
  height: 60px;
  display: flex;
  /* display: flex;
  justify-content: space-between;
  margin: 0 auto; */
}

.head-logo{
  /* width:50px; */
  /* height: 40px; */
  display: inline-block;
  /* float: left; */
  /* display: flex; */
  /* margin-right:15px; */
  align-items: center;
  width: 30%;
  position: relative;
  vertical-align: top;
  line-height: 60px;

  
}
.head-logo a{
  /* width: 40px; */
  display: inline-block;
}
.head-logo img{
  width: 40px;
  vertical-align: middle;
}


.head-search{
  width:30%;
  display: flex;
  /* display: inline-block; */
}

.head-menu{
  width: 70%;
  
  /* display: inline-block; */
  
  /*flex-direction: row;
  
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;  */

  
}


/* hack */
.el-menu {
    /* border-right: solid 2px var(--el-menu-border-color); */
    border:0;
}
.el-menu--horizontal.el-menu {
  border:0;
  
}
/* .el-menu:not(.el-menu--collapse) .el-sub-menu__title {
      padding: 0 20px;
    } */

    .el-sub-menu__hide-arrow .el-tooltip__trigger{  
      padding: 0 20px!important;
    }

.container {
  /* width: 100vh; */
    /* height: 100vh; 
     padding: 2rem 0;
    */
    display: flex;
    
  margin: 0 auto;
  padding: 2% 0;

  /* 用于 非管理后台的配置 */
  /* max-width: 1280px; */
}

.left{
  padding: 10px;
  position: fixed;
  z-index: 9;
  height: 100%;
  overflow: auto;
}
.right{
  padding: 10px;

}

.sub-nav{
  padding: 0 10px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px var(--el-border-color);

  background-color: #fff;
  z-index: 3;
}
.sub-nav a{
  /* width: 40px; */
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* display: inline-flex; 
  justify-content: center;
  align-items: center;
  */
  vertical-align: middle;

  color: #555;
  font-weight: 400;
 
}
.sub-nav i{
  width: 40px;height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.sub-nav .el-backtop{
  position: relative;
  width: auto;
  font-size: 14px;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  /* --el-backtop-bg-color: none;
  --el-backtop-text-color:none;
    --el-backtop-hover-bg-color: none;
    
    
    
    height: auto;
    
    color: none;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    cursor: pointer;
    z-index: 5; */
}


  @media (min-width: 1024px) {
    .sub-nav{display: none;}
    .about {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .left{
      width: 220px;
    }

    .right{
      /* padding-left: 30px; */
      padding-left: 250px;

    }

  }

  @media (max-width: 539px) {
    /* .el-menu:not(.el-menu--collapse) .el-sub-menu__title {
      padding: 0 20px;
    } */
    .left{
      display: none;
    }
   

  }
  </style>